import { Button, Checkbox, Form, Input } from 'antd';
import { useForm } from 'antd/lib/form/Form';
import React from 'react'

export default function FormCom() {
  //1. 创建 form 对象
  let [form] = useForm();

  //当表单提交时触发的事件
  const onFinish = (values: any) => {
    //获取表单值的方式一  函数传参即可
    // console.log(values);
    //获取表单值的方式二  函数传参即可
    //3. 调用方法获得表单的值
    // let result = form.getFieldsValue();
    // console.log(result);

  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
    // 2. 设置 form 属性
      form={form}
      name="basic"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 10 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="user"
        rules={[{ required: true, message: '请输入您的用户名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="pass"
        rules={[{ required: true, message: '请输入您的密码' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item name="reme" valuePropName="checked" wrapperCol={{ offset: 4, span: 16 }}>
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}
